<template>
	<div class="page-wrap">
		<div class="page-inner">
			<div class="page-table-ctx-wrap">
				<!-- 控制器 -->
				<div class="actions-box">
					<div class="control-box">
						<div class="control-left">
							<div class="control-item">
								<!-- <el-button type="primary" @click="doAdd()">
									添加
								</el-button> -->
							</div>
						</div>
						<div class="control-right">
							<div class="action-item">
								<el-date-picker v-model="time_range" type="daterange" align="right" unlink-panels
									range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
									value-format="yyyy-MM-dd" :picker-options="pickerOptions">
								</el-date-picker>
							</div>
							
							
							<div class="action-item">
								<el-select clearable="" v-model="searchParams.renzheng" placeholder="状态筛选"
									@change="select_status_onchange">
									<el-option v-for="item in status_select_options" :key="item.value" :label="item.title"
										:value="item.value">
									</el-option>
								</el-select>
							</div>
							
							<div class="action-item">
								<el-select clearable="" v-model="searchParams.type" placeholder="会员等级"
									@change="select_level_onchange">
									<el-option v-for="item in level_select_options" :key="item.value"
										:label="item.title" :value="item.value">
									</el-option>
								</el-select>
							</div>
							<div class="action-item">
								<el-input clearable="" v-model="searchParams.keyword" placeholder="请输入关键词">
									<el-button slot="append" size="small" icon="el-icon-search" @click="doSearch()">
									</el-button>
								</el-input>
							</div>
							
							<div class="tab-wrap">
								<div class="tab-box">
									<el-tabs v-model="tabName" @tab-click="tabClick">
										<el-tab-pane v-for="(item, index) in tabList" :key="index" :label="item.title" :name="item.name">
										</el-tab-pane>
									</el-tabs>
								</div>
								<div class="actions">
									<el-button type="primary" @click="do_export_all()">导出所有</el-button>
									<el-button type="primary" @click="handleImport()">导入</el-button>
									<!-- <el-button type="primary" @click="do_export_filter()">导出筛选</el-button> -->
								</div>
							</div>
							
							
						</div>
					</div>
				</div>
				<!-- 控制器 -->

				<!-- 渲染表格 -->
				<div class="table-view">


					<w_table ref="w_table" @emitTable="emitTable" />
				</div>
				<!-- 渲染表格 -->
				<div class="table-util">
					<div class="util-left">
						<!-- 批量选择 -->
					</div>
					<div class="util-right">
						<div class="pagi-item">
							<w_pagination v-if="tableData.length" :total="total" :pagination="pagination"
								@size-change="onSizeChange" @current-change="onCurrentChange" />
						</div>
					</div>
				</div>
			</div>
		</div>


		<w_form_modal ref="w_form_modal" @confirm="setView" />
		<user_auth_modal ref="user_auth_modal" @confirm="setView" />
		
		<ImportData ref="downloadTemplate" />
		
		
	</div>
</template>

<script>
import user_auth_modal from '@/components/user/user_auth_modal.vue'

import page_config from "@/constant/user/user-list.js";
import page_mixin from "@/mixins/page_mixin.js";
import ImportData from './components/ImportData.vue';
export default {
	name: "user-list",
	mixins: [page_mixin],
	components: {
		user_auth_modal,
		ImportData
	},
	data() {
		return {
			page_config,


			searchParams: {
				page: 1,
				pageNum: 10,
				type: '',
				keyword: '',
				startTime: '',
				endTime: '',
			},
			
			status_select_options: [{
					title: '全部状态',
					value: -2,
				},
				{
					title: '未提交',
					value: 0,
				},
				{
					title: '待审核',
					value: 1,
				},
				{
					title: '审核成功',
					value: 2,
				},
				{
					title: '审核失败',
					value: -1,
				},
			],
			
			level_select_options: [
				{
				  title: '全部等级',
				  value: '',
				},
				{
					title: '业务员',
					value: 3,
				},
				{
					title: '一级代理',
					value: 2,
				},
				{
					title: '二级代理',
					value: 1,
				},
				{
					title: '客户',
					value: 0,
				},
			],

			//
			time_range: [],
			pickerOptions: {
				disabledDate(time) {
					return time.getTime() > Date.now();
				},
				shortcuts: [{
					text: "最近一周",
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
						picker.$emit("pick", [start, end]);
					},
				},
				{
					text: "最近一个月",
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
						picker.$emit("pick", [start, end]);
					},
				},
				{
					text: "最近三个月",
					onClick(picker) {
						const end = new Date();
						const start = new Date();
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
						picker.$emit("pick", [start, end]);
					},
				},
				],
			},
		};
	},
	computed: {

	},
	watch: {
		time_range(value) {
			console.log('time_range', value)
			if (value && value.length) {
				this.searchParams.startTime = this.time_range[0] || ''
				this.searchParams.endTime = this.time_range[1] || ''
			} else {
				this.searchParams.startTime = ''
				this.searchParams.endTime = ''
			}
		}
	},
	created() {
		
	
		//this.query_user_level()
	},
	mounted() {
		console.log('mounted')
		let currentPage=sessionStorage.getItem('currentPage')
		this.searchParams.page=currentPage
	},
	methods: {
		doRowOther(row, action_title) {
			console.log('其它操作')
			if (action_title == '审核') {
				this.$refs.user_auth_modal.init(row)
			}
		},

		doRowDetail(row) {
			this.$router.push({
				path: 'user-detail',
				query: {
					id: row.id
				}
			})
		},
		
		select_status_onchange() {
			this.initQuery()
		},
		
		onSizeChange(){
			console.log('sizechange')
		},

		doRowDelete(row) {
			this.$log('删除', row)

			this.$confirm('确认删除该用户?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$api({
					url: '/admin_service.php',
					method: "get",
					data: {
						action: "users_delUsers",
						ids: row.id,
					},
				}).then((res) => {
					if (res.code == 200) {
						this.setView();
						this.$message({
							message: res.msg,
							type: 'success'
						})
					} else {
						alertErr(res.msg)
					}
				});
			}).catch(() => {

			});
		},




		query_user_level() {
			this.$api({
				url: '/admin_service.php',
				method: "get",
				data: {
					action: "setting_getLevelList",
				},
			}).then((res) => {
				if (res.code == 200) {
					this.level_select_options = res.data.list.map(v => ({
						...v,
						value: v.id
					}))
				}
			});
		},
		select_level_onchange() {
			this.initQuery()
		},
		
		
		do_export_all() {
			let token = this.mix_get_token()
			let url =
				`${this.API_ROOT}?action=users_exportForm&page=1&pageSize=1000000&level=&keyword=&startTime=&endTime=&token=${token}`
			window.open(url, '_blank')
		},
		
		do_export_filter() {
			let token = this.mix_get_token()
			let startTime = this.time_range[0] || ''
			let endTime = this.time_range[1] || ''
			
			let url =
				`${this.API_ROOT}?action=orders_daochu&page=1&pageSize=1000000&orderStatus=${this.tabSelect.value}&keyword=${this.keyword}&startTime=${startTime}&endTime=${endTime}&token=${token}`
			window.open(url, '_blank')
		},
		
		handleImport() {
			this.$refs.downloadTemplate.openDialog();
			// 导入方法
		},

	},
};
</script>

<style scoped lang="less">
// /deep/ .el-table table {
//   width: 100% !important;

//   thead {
//     th.el-table__cell {
//       background: #f8f8f8;
//       color: #000;
//     }
//   }
// }


.page-table-ctx-wrap {
	background: #fff;
	padding: 20px;
	border-radius: 6px;
}

// 新增
.control-box {
	.flex-between();

	.control-left {
		.flex();

		.control-item {
			margin-right: 10px;
		}
	}

	.control-right {
		.flex();

		.action-item {
			margin-left: 10px;
		}
	}
}

.table-view {
	margin-top: 20px;
	margin-bottom: 20px;
}


// 表格工具栏
.table-util {
	.flex-between();

	.util-left {
		.flex();
		min-width: 100px;

		.util-items {
			.flex();

			.item {
				margin-right: 10px;
			}
		}
	}

	.util-right {}
}
/deep/.el-tabs__header{
	margin: 0 0 0px !important;
	
}
.actions{
	margin-left: 20px;
}
</style>